<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="nav-box flexWrap">
					<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==0}" @tap="changeNav(0)">
						<text>0</text>
						<text class="nav-text">全部工单</text>
					</view>
					<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==1}" @tap="changeNav(1)">
						<text>0</text>
						<text class="nav-text">待受理</text>
					</view>
					<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==2}" @tap="changeNav(2)">
						<text>0</text>
						<text class="nav-text">已受理</text>
					</view>
					<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==3}" @tap="changeNav(3)">
						<text>0</text>
						<text class="nav-text">已解决</text>
					</view>
				</view>
				<view class="work-box">
					<view class="work-item" v-for="(item,index) in 2" :key="index" @tap="goPage('/pages/manage/workDetails')">
						<view class="item">
							<view class="top-box flexWrap">
								<view class="left-box flexWrapNo">
									<image src="../../static/index/ask-icon.png" class="icon"></image>
									<text class="time">2023-03-12 8:00:00</text>
									<text class="lable">已等待6小时</text>
								</view>
								<text class="status">待受理</text>
							</view>
							<view class="work-text">有抖音官方人员联系我上抖音共享团单，这个活动是否可以参加？</view>
						</view>
						<view class="answer-item">
							<view class="top-box">
								<view class="left-box flexWrapNo">
									<image src="../../static/index/answer-icon.png" class="icon"></image>
									<text class="time">2023-03-12 8:00:00</text>
									<text class="lable">已受理6小时</text>
								</view>
							</view>
							<view class="work-text">有抖音官方人员联系我上抖音共享团单，这个活动是否可以参加？</view>
						</view>
					</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<view class="define-btn" @tap="goPage('/pages/manage/addWork')">创建工单</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				currmentIndex:0,
			}
		},
		onLoad() {
			
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		// 触底刷新
		onReachBottom() {
			if (this.more) {
				this.getData()
			}
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.freshList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			changeNav(index){
				this.currmentIndex=index
			},
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 120upx;
	}
	.nav-box{
		padding: 40upx 20upx;
		border-bottom: 2upx solid #36355E;
		.nav-item{
			width: 140upx;
			height: 120upx;
			background:#1D1C5C;
			border-radius: 16upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bolder;
			line-height: 44upx;
			color: #FFFFFF;
			justify-content: center;
			.nav-text{
				font-size: 24upx;
				font-weight: 400;
			}
		}
		.active{
			background-color: #26BCFD;
		}
	}
	.work-box{
		padding:32upx;
		.work-item{
			padding: 32upx 28upx;
			background: #1A195F;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 20upx;
			.top-box{
				.left-box{
					.icon{
						width: 48upx;
						height: 48upx;
					}
					.time{
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C8CAF;
						line-height: 36rpx;
						margin-left: 16upx;
					}
					.lable{
						color: #9897C0;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						height: 44rpx;
						line-height: 44rpx;
						background: #312F80;
						border-radius: 22rpx 22rpx 22rpx 22rpx;
						display: inline-block;
						padding: 0 14upx;
						margin-left: 6upx;
					}
				}
				.status{
					width: 122rpx;
					height: 44rpx;
					border-radius: 22rpx 22rpx 22rpx 22rpx;
					border: 2rpx solid #EB564F;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF4646;
					line-height: 44rpx;
					text-align: center;
				}
				.green{
					color:#53A33A;
					border: 2rpx solid #53A33A;
				}
				.grey{
					color:#969696;
					border: 2rpx solid #969696;
				}
			}
			.work-text{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				margin-top: 22upx;
				padding-left: 16upx;
			}
			.answer-item{
				margin-top: 28upx;
			}
		}
	}
	.bottom-box{
		height: 120rpx;
		background: #1D1C5C;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		.define-btn{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			width: 322rpx;
			height: 80rpx;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
		}
	}
</style>
